<template>
	<view class="sendmaterial">
		<view class="sendmaterial-top">
			<image :src="erpInfo.SETTB99CA03 || getStaticFilePath('/sendOrder/chooseMaterial/chooseMaterial-nav.png')"
				mode="">
			</image>
			<text @click="returnclick" class="iconfont iconarrow_left-copy"></text>
			<view class="sendmaterial-top-text">
				<view class="">
					{{ erpInfo.SETTB99CA00 || '' }}
				</view>
			</view>
		</view>
		<view class="sendmaterial-erp-address">
			<view class="sendmaterial-erp-address-p">
				<view class="">
					<text class="iconfont icondianhua"></text>
					<span @click="phoneCallClick" style="color: #007AFF;padding-right: 20rpx;">
						{{ erpInfo.SETTB99CA05 || '暂无联系方式' }}
					</span>
				</view>

				<view class="">
					<view>
						{{ erpInfo.SETTB99CA02 || '暂无地址' }}
					</view>
				</view>
			</view>

		</view>
		<!-- 公告 -->
		<uni-notice-bar class="notice" font-size="40" background-color="#fff" :speed="50" scrollable single showIcon
			color="#333" :text="erpInfo.notice"></uni-notice-bar>
		<view class="public-no-img" v-if="materList.length == 0">
			<image :src="getStaticFilePath('/QXY/noData.png')"></image>
		</view>
		<view class="sendmaterial-li-ul" v-for="(item, index) in materList" :key="index">
			<view class="sendmaterial-li" @click="sendMaterClick(item)">
				<view class="sendmaterial-li-image">
					<image @click.stop="imgyl(item)" class="img-wlimg" style=""
						:src="item.settb109CA07 || '../../static/images/no-meater.png'">
					</image>
				</view>
				<view class="sendmaterial-li-mater">
					<view class="sendmaterial-li-mater-text">
						<text>{{ item.settb109CA00 || '' }}</text>
						<text v-if="item.settb109CB06 && item.settb109CB06.includes('米')"
							style="padding-left: 30rpx;font-size: 24rpx;color: #007AFF;">高度：{{ item.settb109CB06 }}</text>
						<text v-if="item.settb109CB06 == '有料' || item.settb109CB06 == '无料'"
							style="padding-left: 30rpx;font-size: 24rpx;color: #007AFF;">{{ item.settb109CB06 }}</text>
					</view>
					<view class="sendmaterial-li-mater-pric">
						<label>￥</label>
						<text v-if="AuthorizationOBJ.ORMTB417CA06 == 0"> *** </text>
						<view style="display: inline-block;color: red; " v-else> {{ item.settb109CA01 || 0 }}/吨
							<text style="color: #333;font-size: 24rpx;">（零售{{ item.settb109CA01_ys || 0 }})</text>
						</view>
					</view>
					<view style="font-size: 24rpx;color:paleturquoise;" class="">
						<text>上次调价时间：</text>{{ item.settb109CB03 || '' }}
						<text v-if="item.settb109CB08 && item.settb109CB08.substring(0, 1) == '上'"
							style="padding-left: 20rpx; color: red;">
							<text>↑</text>
							{{ item.settb109CB08 }}</text>
						<text v-if="item.settb109CB08 && item.settb109CB08.substring(0, 1) == '下'"
							style="padding-left: 20rpx; color: #008000;"><text>↓</text> {{ item.settb109CB08 }}</text>
					</view>
					<view class="sendmaterial-li-btn">
						<view class="">
							<button type="default">立即选择</button>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view>
			<q-previewImage ref="previewImage" :urls="imgs" @open="open" @close="close">
			</q-previewImage>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cusshow: false,
				showComplete: false,
				base64: '', // 视频
				videoContext: '',
				videObj: {},
				video: {
					visible: false,
					url: '',
					context: null
				},
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				erpInfo: JSON.parse(uni.getStorageSync('erpinfo')),
				Erptype: JSON.parse(uni.getStorageSync('Erptype')),
				materList: [],
				AuthorizationOBJ: '',
				navId: '',
				tzData: '',
				videoShow: false, //video组件是否显示
				imgs: []
			}
		},
		onLoad(op) {
			this.tzData = op.tzData
		},

		onShow() {
			uni.removeStorageSync('sendobj')
			uni.removeStorageSync('materInfo')
			this.queryGwcList()
			if (this.userinfo.sign == 'CUS-3') {
				this.queryAuthorization()
			}
			if (!this.erpInfo.notice) {
				this.erpInfo.notice = '暂无公告内容'
			}
		},
		methods: {
			imgyl(item) {
				this.preview(item)
			},
			preview(url) {
				this.imgs = []
				this.imgs.push(url.materImg) //设置图片数组
				// #ifdef MP-WEIXIN
				this.$nextTick(() => {
					this.$refs.previewImage.open(url.materImg); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
				})
				// #endif

				// #ifndef MP-WEIXIN
				this.$refs.previewImage.open(url.materImg); // 传入当前选中的图片地址
				// #endif
			},
			onLongpress(e) { //长按事件
				uni.showActionSheet({
					itemList: ['转发给朋友', '保存到手机'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			/* open和close方法一般用不到，但是在一些特殊场景会用到，
			 * 比如预览图片时你需要覆盖 NavigationBar和 TabBar，
			 * 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等，
			 * 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等
			 */
			open() { //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
				uni.hideTabBar()
				uni.setNavigationBarColor({
					frontColor: '#000000', // 设置前景色为黑色
					backgroundColor: '#000000', // 设置背景色为黑色
				})
				this.videoShow = false
			},
			close() { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
				uni.showTabBar()
				uni.setNavigationBarColor({
					frontColor: '#ffffff', // 设置前景色为白色
					backgroundColor: '#000000', // 设置背景色为黑色
				})
				this.videoShow = true
			},
			chooseVideo() {
				var _self = this
				this.showComplete = false
				uni.chooseVideo({
					count: 1,
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						if (res) {
							var tempFilePath = res.tempFilePath
							// console.log(tempFilePath)
							uni.uploadFile({
								url: _self.baseUrl + '/set/settb109/upload',
								filePath: tempFilePath,
								name: 'file',
								success(resdata) {
									// console.log(resdata)
									if (resdata.statusCode == 200) {
										uni.hideLoading()
										resdata.data = JSON.parse(resdata.data);
										uni.showToast({
											title: resdata.data.message,
											icon: 'none'
										})
										_self.upBdImg = resdata.data.data.url
										_self.base64 = resdata.data.data.url
										_self.showComplete = true
									}
								},
								fail(resdata) {
									uni.hideLoading()
								}
							})
						}
					}
				});
			},
			phoneCallClick() {
				uni.makePhoneCall({
					phoneNumber: this.erpInfo.SETTB99CA05
				});
			},
			submitInsert() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				var ORMTB410ID = ''
				if (this.userinfo.sign == "CUS-2" || this.userinfo.sign == 'CUS-3') {
					ORMTB410ID = this.userinfo.ORMTB410ID
				}
				uni.request({
					url: this.baseUrl + '/set/settb109/insert',
					method: 'POST',
					dataType: 'json',
					data: {
						SETTB109ID: this.videObj.settb109ID,
						SETTB109CA09: this.base64
					},
					success: (res) => {
						// console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							this.showComplete = false
							this.base64 = ''
						} else {
							this.$refs.uToast.show({
								title: res.data.success,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			radioChange(index) {
				var list = this.shopppingOrderList
				this.shopppingOrderList = ''
				list[index].checkstyle = list[index].checkstyle == 'activeBox' ? '' : 'activeBox'
				this.shopppingOrderList = list
			},
			changeValue(value) {
				if (value == 0) {
					return '净重'
				} else if (value == 1) {
					return '毛重'
				}
			},
			queryGwcList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.materList = []
				var ORMTB410ID = ''
				if (this.userinfo.sign == "CUS-2" || this.userinfo.sign == 'CUS-3') {
					ORMTB410ID = this.userinfo.ORMTB410ID
				}
				uni.request({
					url: this.baseUrl + '/orm/ormtb440/selectAllSettb109',
					method: 'POST',
					dataType: 'json',
					data: {
						SETTB99ID: this.erpInfo.SETTB99ID, //二级企业代码
						ORMTB410ID: ORMTB410ID,
						sign: this.userinfo.sign,
					},
					success: (res) => {
						// console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							this.materList = res.data.data || []
							this.materList.forEach(item => {
								if (item.settb109CA07) {
									var flag = this.isBase64(item.settb109CA07)
									if (flag == false) {
										item.materImg = item.settb109CA07
									} else {
										item.materImg = 'data:image/png;base64,' + item
											.settb109CA07
									}
								}
							})
						} else {
							this.$refs.uToast.show({
								title: res.data.success,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			isBase64(str) {
				if (str === '' || str.trim() === '') {
					return false;
				}
				try {
					return btoa(atob(str)) == str;
				} catch (err) {
					return false;
				}
			},
			returnclick() {
				if (this.Erptype == 1) {
					uni.reLaunch({
						url: '/pages/SOenterprise/index'
					})
				} else {
					uni.switchTab({
						url: '/pages/tabbar/home/index',
					})
					
				}
			},
			sendMaterClick(item) {
				if (this.AuthorizationOBJ.ORMTB417CA05 && this.AuthorizationOBJ.ORMTB417CA05 == 0) {
					uni.showToast({
						title: '您没有操作权限',
						duration: 5000,
						icon: 'none',
					});
					return
				}
				var str = JSON.stringify(item)
				uni.setStorageSync('materInfo', str);
				uni.navigateTo({
					url: '/pages/SOcar/index'
				})
			},
			sendVideoClick(item) {
				this.videObj = item
				this.showComplete = true
			},
			queryAuthorization() { //查询子账户权限
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb417/selectAccess/' + this.userinfo.ORMTB417ID,
					method: 'GET',
					success: (res) => {
						// console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							this.AuthorizationOBJ = res.data.data
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
		}
	}
</script>

<style scoped>
	.sendmaterial {
		background: #e3e3e3;
	}

	.sendmaterial-top {
		width: 100vw;
		height: 25vh;
		position: fixed;
		top: 0;
		z-index: 99999;
	}

	.sendmaterial-top-text {
		position: absolute;
		left: 40rpx;
		bottom: 20rpx;
		color: #fff;
		/* font-size: 36rpx; */
		z-index: 999;
		font-weight: 600;
	}

	.sendmaterial-top-text .iconfont {
		color: #ffaa00;
		font-size: 24rpx;
	}

	.sendmaterial-top-text view {
		margin-bottom: 10rpx;
	}

	.sendmaterial-top image {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
	}

	.sendmaterial-top .iconarrow_left-copy {
		position: absolute;
		top: 30%;
		left: 20rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFF;
		z-index: 999;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}

	.sendmaterial-erp-address {
		padding: 20rpx 30rpx 20rpx 30rpx;
		/* font-size: 26rpx; */
		/* border-bottom: 20rpx solid #e3e3e3; */
		margin-top: 25vh;
		margin-bottom: 0;
		background: #FFF;
	}

	.sendmaterial-erp-address-p {
		display: flex;
	}

	.sendmaterial-erp-address-p view {
		/* line-height: 30rpx; */
	}

	.sendmaterial-erp-address-p text {
		margin-right: 10rpx;
		line-height: 30rpx;
	}

	.sendmaterial-erp-address-p .iconfont {
		font-size: 24rpx;
	}

	.sendmaterial-erp-address-p+.sendmaterial-erp-address-p {
		margin-top: 15rpx;
	}

	.sendmaterial-cusname {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		overflow: hidden;
	}

	.sendmaterial-cusname .iconxiala {
		margin-left: 20rpx;
		color: #999;
		font-size: 24rpx;
	}

	.sendmaterial-title {
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
	}

	.sendmaterial-li-ul {
		margin: 10rpx;
		border-bottom: 1px solid rgba(230, 230, 230, 0.5);
		border-radius: 10rpx;
		background: #fff;
		padding-right: 10rpx;
		margin-top: 0;
	}

	.sendmaterial-li {
		display: flex;

	}

	.sendmaterial-li-image {
		/* width: 150rpx;
		height: 100rpx; */
		/* padding-right:30rpx; */
	}

	.sendmaterial-li-image image {
		height: 100%;
		width: 100%;
	}

	.sendmaterial-li-image .img-wlimg {
		border-radius: 10rpx 0 0 10rpx;
		width: 200rpx;
		/* height: 200rpx; */
	}

	.sendmaterial-li-mater {
		flex: 1;
		/* margin-right: 20rpx; */
		padding: 10rpx 0;
		padding-left: 10rpx;
	}

	.sendmaterial-li-mater-text {
		/* height: 40rpx; */
		overflow: hidden;
		color: #333;
		/* font-size: 28rpx; */
	}

	.sendmaterial-li-mater-pric {
		padding: 10rpx 0;
	}

	.sendmaterial-li-mater-pric label {
		font-size: 22rpx;
		color: red;
		font-style: italic;
		margin-right: 10rpx;
	}

	.sendmaterial-li-mater-pric text {
		font-size: 30rpx;
		color: red;
		margin-right: 10rpx;
	}

	.sendmaterial-li-btn {
		padding-bottom: 10rpx;
		padding-top: 20rpx;
		display: flex;
		justify-content: flex-end;
	}

	.sendmaterial-li-btn button {
		/* position: relative; */
		width: 228rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgb(255, 255, 255, 1);
		/* font-size: 30rpx; */
		color: #00a2f2;
		border: 2rpx solid #00a2f2;
		/* margin-top: 20rpx;
		margin-right: 20rpx; */
		right: 0;

	}

	.sendmaterial-li-btn .but-shipin-up {
		background-color: rgb(255, 255, 255, 1);
		color: #FFCC00;
		border: 2rpx solid #FFCC00;
	}

	.sendmaterial-shoppingcar {
		position: fixed;
		width: 130rpx;
		height: 130rpx;
		left: 30rpx;
		bottom: 60rpx;
		line-height: 130rpx;
		border-radius: 50%;
		text-align: center;
		background-color: #02a2f4;
		box-shadow: 2rpx 3rpx 3rpx 3rpx rgb(0 38 66 / 32%);
		color: #FFF;
		z-index: 99;
	}

	.sendmaterial-shoppingcar .iconfont {
		display: inline-block;
		width: 130rpx;
		height: 130rpx;
		line-height: 130rpx;
		font-size: 66rpx;
		vertical-align: top;
	}

	.sendmaterial-shoppingcar view {
		position: absolute;
		right: 0;
		top: 0;
		height: 30rpx;
		width: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background-color: red;
		border-radius: 50%;
		font-size: 26rpx;
	}

	.shoppingCarShow-box {}

	.shoppingCarShow-box-top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 160rpx;
		color: #999;
		font-size: 28rpx;
		/* background-color: #FFF; */
		padding: 0 0 20rpx;
		box-sizing: border-box;
		border-bottom: 10rpx solid #e3e3e3;
		z-index: 9;
	}

	.shoppingCarShow-box-top text {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 80rpx;
		text-align: center;
	}

	.shoppingCarShow-box-p {
		margin-top: 160rpx;
		margin-bottom: 120rpx;
	}

	.shoppingCarShow-box-p-title {
		display: flex;
		color: #333;
		font-size: 26rpx;
		padding: 20rpx 20rpx 0;
	}

	.shoppingCarShow-box-p-title image {
		width: 50rpx;
		height: 40rpx;
	}

	.shoppingCarShow-box-p-title-checkbox {
		height: 45rpx;
		line-height: 45rpx;
		width: 45rpx;
		text-align: center;
		border: 1rpx solid #e3e3e3;
		border-radius: 50%;
		margin: 0 20rpx 0 0;
		color: #FFF;
	}

	.shoppingCarShow-box-p-title-checkbox .iconduihao {
		font-size: 30rpx;
		font-weight: 600;
	}

	.shoppingCarShow-box-p-title .activeBox {
		background-color: #00A1F1;
		border-color: #00A1F1;
	}

	.shoppingCarShow-box-p-title-erp {
		flex: 1;
		padding: 0 15rpx;
	}

	.shoppingCarShow-box-p-title-mater {
		flex: .5;
	}

	.shoppingCarShow-box-p-title .iconqingkong {
		width: 60rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}

	.shoppingCarShow-box-p-li {
		display: flex;
		padding: 20rpx 40rpx 0;
		justify-content: space-between;
	}

	.shoppingCarShow-box-p-li-r>text {
		display: inline-block;
		width: 80rpx;
		color: #999;
		font-size: 30rpx;
		text-align: center;
	}

	.shoppingCarShow-box-p-li-l {
		display: flex;
		flex: 1;
	}

	.shoppingCarShow-box-p-li-l-car {
		flex: .7;
	}

	.shoppingCarShow-box-p-li-l-weight {
		flex: 1;
	}

	.shoppingCarShow-box-p-li-l-num {
		flex: .5;
	}

	.shoppingCarShow-box-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		box-sizing: border-box;
		border-top: 10rpx solid #e3e3e3;
		background-color: #fff;
		color: #333;
		z-index: 9;
	}

	.shoppingCarShow-box-bottom-l {
		position: relative;
	}

	.shoppingCarShow-box-bottom-l>text {
		display: inline-block;
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
	}

	.shoppingCarShow-box-bottom-l>view {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		background-color: red;
		z-index: 2;
	}

	.shoppingCarShow-box-bottom-l .icongouwuche {
		font-size: 60rpx;
		color: #02a2f4;
	}

	.shoppingCarShow-box-bottom-r {
		display: flex;
		flex: 1;
	}

	.shoppingCarShow-box-bottom-r>view {
		flex: 1;
		padding: 20rpx 20rpx 0 0;
		text-align: right;
	}

	.shoppingCarShow-box-bottom-r>view>text {
		font-size: 24rpx;
	}

	.shoppingCarShow-box-bottom-r-count {
		font-size: 30rpx;
	}

	.shoppingCarShow-box-bottom-r-count>text {
		color: red;
		font-size: 32rpx;
	}

	.shoppingCarShow-box-bottom-r button {
		height: 120rpx;
		line-height: 120rpx;
		background-color: #02a2f4;
		color: #FFF;
		font-size: 34rpx;
	}

	/*公告 */
	.notice {
		width: 100%;
		margin: 0;
		/* background-color: #FFFFFF; */
		border-bottom: 10rpx solid #e3e3e3;
		padding-left: 30rpx;

	}

	/*上传视频弹框 */
	.popup_title {
		font-size: 36rpx;
		font-weight: 700;
		text-align: center;
		padding: 30rpx;
	}

	.popup_cell {
		margin: 0 30rpx;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
		border-bottom: 2rpx solid #ebebeb;
		display: flex;
		align-items: center;
	}

	.popup_cell.upload_area {
		align-items: flex-start;
	}

	.upload_wrap {
		margin-left: 32rpx;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.upload_img {}

	.upload_placeholder {}

	.popup_cell-label {
		font-size: 30rpx;
		color: #666666;
		width: 150rpx;
		text-align: right;
	}

	.popup_cell_value {
		flex: 1;
	}

	.popup_cell_input {
		font-size: 32rpx;
		width: 100%;
		height: 60rpx;
		padding: 0 20rpx;
	}

	.input-placeholder {
		font-size: 30rpx;
	}

	.popup_btn {
		background-color: #007AFF;
		margin: 60rpx;
		color: #FFFFFF;
	}

	.tit_text {
		text-align: center;
		padding: 20rpx 0;
	}
</style>